<template>
    <div class='h-100' ref='chartPies'>
        <v-chart v-if='value' style='height: 100%;width: 100%;' :options='options'></v-chart>
        <loading v-else></loading>
    </div>
</template>

<script>
export default {
    props : {
        value : {
            type : [Array, Object],
            default () {
                return []
            }
        }
    },

    computed : {
        options () {
            var data = this.value
            var pies = this.$refs.chartPies
            var W = pies.clientWidth - 4
            var H = pies.clientHeight - 4
            var offset = (W - H * 4) / 3
            var center = []

            var i = 0

            for(let i = 0; i < 4; i ++) {
                center.push([i * H + H / 2 + i * offset + 2, H / 2])
            }

            


            var series = []
            var colors = [
                ['#7e2aff', '#4b52ff'],
                ['#f35e52', '#fd8c34'],
                ['#2df13a', '#dadd0a'],
                ['#1a81ff', '#1dc9ff']
            ]

            center.forEach((center, i) => {
                if(!data[i]) return
                var serie1 = {
                    type: 'pie',
                    center: [center[0], center[1] + 2],
                    radius: [center[1] - 2, center[1]],
                    silent : true,
                    label : {
                        show : false
                    },
                    labelLine : {
                        show : false
                    },
                    itemStyle : {    
                        color : '#6d788e'
                    },
                    data : [1]
                }

                var serie2 = {
                    type: 'pie',
                    center: [center[0], center[1] + 2],
                    radius: [center[1] - 8, center[1]],
                    silent : true,
                    label: {
                        show : false
                    },
                    labelLine : {
                        show : false
                    },
                    startAngle : 90,
                    data : [
                        {
                            name : data[i].name,
                            value : data[i].online,
                            label : {
                                show : true,
                                position : 'center',
                                color : '#fff',
                                rich : {
                                    hr : {
                                        height : 5
                                    }
                                },
                                formatter : '{d}%\n{hr|}\n{b}'
                            },
                            itemStyle : {
                                color : new VueECharts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0,
                                        color: colors[i][0]
                                    },
                                    {
                                        offset: 1,
                                        color: colors[i][1]
                                    }
                                ], false),
                            }
                        },

                        {
                            value : data[i].total - data[i].online,
                            itemStyle : {
                                opacity : 0
                            }
                        }
                    ]
                }

                

                series.push(serie1)
                series.push(serie2)
            })



            var options = {
                grid : {
                    top : 0,
                    right : 0,
                    bottom : 0,
                    left : 0
                },

                series : series
            }

            return options

        }
    }
}
</script>